<template>
  <base-paenl>
    <span slot="header">
      楼盘房源信息
    </span>
    <div slot="main" class="slot-main">
      <!-- <div class="select">
        <div class="name">房屋坐落</div>
        <div class="value">{{ floorData.ldzl }}</div>
      </div> -->
      <div class="lenged">
        <div class="name-list">
          <div class="name">房屋图例</div>
          <div class="list">
            <div>出租</div>
            <div>未知</div>
          </div>
        </div>
      </div>
      <div v-if="message != ''" class="panel-message">
        {{ message }}
      </div>
      <el-scrollbar v-else class="scrollbar">
        <div class="house-item">
          <div class="house" v-for="(item, index) of dataList" :key="index">
            <div class="label">{{ item && item.szc }}</div>
            <div class="num">
              <div
                @click="lookDetail(project)"
                class="item"
                :class="[
                  project['sfcz'] === '1' ? 'orange' : '',
                  project['fh'] === active ? 'active' : ''
                ]"
                v-for="(project, indexP) of item.lpfwxxs"
                :key="indexP"
                :title="project['fh']"
              >
                {{ project["fh"] }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-else>{{ message }}</div> -->
      </el-scrollbar>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import exportVue from "@/assets/modules/exportVue";
import { getFloorHouse, getWholeHouse } from "@/assets/modules/service";

@Component({
  name: "CFloorHouse",
  components: { BasePaenl }
})
export default class extends Vue {
  get floorData() {
    return this.$store.getters["panelData/floorData"];
  }
  @Watch("floorData", { deep: true })
  handleFloorData() {
    this.getFloorHouse();
    // if (this.floorData.sjytssx && this.floorData.sjytssx !== "" && this.floorData.bxttssx && this.floorData.bxttssx !== "") {
    //   this.getFloorHouse();
    // } else {
    //   this.message = this.floorData.sjytssx || this.floorData.bxttssx || '';
    // }
  }
  dataList: any = [];
  active: string = "";
  message: string = "";
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.floorHouse;
    this.getFloorHouse();
    // if (this.floorData.sjytssx && this.floorData.sjytssx !== "" && this.floorData.bxttssx && this.floorData.bxttssx !== "") {
    //   this.getFloorHouse();
    // } else {
    //   this.message = this.floorData.sjytssx || this.floorData.bxttssx || '';
    // }
  }
  getFloorHouse() {
    const param: any = {
      lzId: this.floorData.lzId
    };
    console.log(param);

    getFloorHouse(param).then((res: any) => {
      if (res?.data) {
        this.dataList = res.data;
        this.message = "";
      } else {
        this.dataList = [];
        this.message = this.floorData.sjytssx || this.floorData.bxttssx || "";
      }
    });
  }
  lookDetail(item: any) {
    this.active = item["fh"];
    this.getWholeHouse(item.fwzl);
  }
  getWholeHouse(fwzl: string) {
    const param: any = {
      fwzl: fwzl
    };
    getWholeHouse(param).then((res: any) => {
      this.$store.commit("panel/setRightPanelShow", false);
      if (res?.data) {
        const houseData = res.data;
        this.$nextTick(() => {
          this.$store.commit("panel/setRightPanelShow", true);
          this.$store.commit("panel/setRightPanel", "floor");
          this.$nextTick(() => {
            exportVue.$emit("initFloor", houseData);
          });
        });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 214px;
  .name {
    height: 15px;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 16px;
    line-height: 22px;
    color: #fefefe;
  }
  .select {
    display: flex;
    align-items: center;
    .value {
      margin-left: 10px;
      width: 326px;
      height: 37px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 14px;
      line-height: 17px;
      color: #ffffff;
      background-image: url(../../assets/images/panels/biaogekuang.png);
      background-size: 100% 100%;
    }
  }
  .lenged {
    margin-top: 10px;
    .name-list {
      display: flex;
      .list {
        display: flex;
        margin-left: 10px;
        div {
          width: 74px;
          height: 29px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          font-family: AlibabaPuHuiTi_2_75_SemiBold;
          font-size: 14px;
          line-height: 17px;
          color: #fad06d;
          background-image: url(../../assets/images/panels/weizhibeijingkuanghou.png);
          background-size: 100% 100%;
          &:nth-child(2) {
            color: #ffffff;
            background-image: url(../../assets/images/panels/weizhibeijingkuangqian.png);
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .scrollbar {
    margin-top: 10px;
    height: 152px;
    .house-item {
      .house {
        display: flex;
        margin-bottom: 10px;
        .label {
          width: 72px;
          height: 29px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: AlibabaPuHuiTi_2_65_Medium;
          font-size: 16px;
          line-height: 22px;
          color: #08ebff;
        }
        .num {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          .item {
            width: 74px;
            height: 29px;
            overflow: hidden;       /* 隐藏超出部分 */
            white-space: nowrap;     /* 不换行 */
            text-overflow: ellipsis;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            margin-right: 10px;
            font-family: AlibabaPuHuiTi_2_75_SemiBold;
            font-size: 14px;
            line-height: 29px;
            text-align: center;
            color: #ffffff;
            background-image: url(../../assets/images/panels/weizhibeijingkuangqian.png);
            background-size: 100% 100%;
            cursor: pointer;
            &:nth-child(4n) {
              margin-right: 0;
            }
            &.orange {
              color: #ffca3a;
              background-image: url(../../assets/images/panels/weizhibeijingkuanghou.png);
              background-size: 100% 100%;
            }
            &.active {
              color: #239efd;
            }
          }
        }
      }
    }
  }
}
</style>
